<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Person Regist</title>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
	body{ 
		text-align:center
	} 
	.add-div{
		text-align: center;
	}
	.show-div{
		text-align: center;
	}
	.show-table{
		text-align: center;
	}
	#show-table tr td{
            text-align: left;
            padding: 5px 20px;
        }
</style>
</head>
<body>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  	<div class="modal-dialog" role="document">
    	<div class="modal-content">
      	<div class="modal-header">
        	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        	<h4 class="modal-title" id="myModalLabel">Modal title</h4>
      	</div>
      	<div class="modal-body">
        	<span>name:</span><input type="text" name="update-name"/><br/>
			<span>sex:</span><input type="radio" name="update-sex" checked="checked" value="true">ma
			<input type="radio" name="update-sex" value="false">women <br/>
			<span>sal:</span><input type="number" name="update-sal"><br/>
			<span>birth:</span><input type="date" name="update-birth"/><br/>
     	</div>
      	<div class="modal-footer">
       		<button type="button" id="update-btn"  class="btn btn-default" data-dismiss="modal">Update</button>
        	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      	</div>
    </div>
  </div>
</div>
	<div>
		<div id="add-div">
			<span>name:</span><input type="text"  name="name"/><br/>
			<span>sex:</span><input type="radio" name="sex" checked="checked" value="true">ma
			<input type="radio" name="sex" value="false">women <br/>
			<span>sal:</span><input type="number" name="sal"><br/>
			<span>birth:</span><input type="date" name="birth"/><br/>
            <button id="add">add</button>
		</div>
		<div id="show-div">
			<table id="show-table">
				<tr>
					<td>姓名</td>
					<td>性别</td>
					<td>薪水</td>
					<td>生日</td>
                    <td>更新</td>
                    <td>删除</td>
				</tr>
			</table>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			
			function updateInofoFunc(){
				var update_person_id = "";
				var update_delete;
				function setUpdatePersonId(id){
					update_person_id = id;
				}
				function setUpdateBtn(btn){
					update_delete = btn;
				}
				function getUpdatePersonId(id){
					return update_person_id;
				}
				function getUpdateBtn(btn){
					return update_delete;
				}
				return [setUpdatePersonId, setUpdateBtn, getUpdatePersonId, getUpdateBtn];
			}
			
			//通用
			function addPersonByLine(){
				function addBtnFunc(deleteBtn, updateBtn){
					deleteBtn.click(function(){
	                	$.ajax({
	                        type:"GET",
	                        url:"deletePerson?id="+$(this).val(),
	                        contentType:"application/json"
	                    }
	                    ).done(function(msg){
	                    });
	                	 $(this).parent().parent().remove();
	                });
	                updateBtn.click(function(){
	                	updateInofo[0]($(this).val());
	                	updateInofo[1]($(this).val($(this).parent().parent()));
	                });
				}
				function addPersonLine(msg){
	                var tr = $("<tr></tr>").val(msg.id);
	                $("#show-table").append(tr);
	                tr.append($("<td></td>").text(msg.name));
	                tr.append($("<td></td>").text(msg.sex));
	                tr.append($("<td></td>").text(msg.sal));
	                var date = new Date(msg.birth);
	                tr.append($("<td></td>").text(date.toString().split(" ").slice(0,5)));
	                var deleteBtn = $("<button id='delete'></button>").text("delete").val(msg.id);
	                var updateBtn = $("<button type='button' data-dismiss='modal' data-toggle='modal' data-target='#myModal'></button>").text("update").val(msg.id);
	                tr.append($("<td></td>").append(deleteBtn));
	                tr.append($("<td></td>").append(updateBtn));
	                addBtnFunc(deleteBtn, updateBtn);
	            };
	            return addPersonLine;
			};
            
            function addPerson(){
                var person = {
                    id: "",
                    name: "",
                    sex: "",
                    sal: "",
                    birth: ""
                };
                function getAddPersonInfo(){
                    person.name = $("input[name='name']").val();
                    person.sex = $("input[name='sex']:checked").val();
                    person.sal = $("input[name='sal']").val();
                    person.birth = $("input[name='birth']").val();
                    console.log(person.name+"...."+person.sal+"...")
                };
                function getUpdatePersonInfo(){
                    person.id = updateInofo[2]();
                    person.name = $("input[name='update-name']").val();
                    person.sex = $("input[name='update-sex']").val();
                    person.sal = $("input[name='update-sal']").val();
                    person.birth = $("input[name='update-birth']").val();
                };
                function clearPersonInfo(){
                    person.name = "";
                    person.sex = "";
                    person.sal = "";
                    person.birth = "";
                    person.id = "";
                    $("input[name='update-name']").val("");
                    $("input[name='update-sex']").val("");
                    $("input[name='update-sal']").val("");
                    $("input[name='update-birth']").val("");
                };
                function request(urlPath){
                    $.ajax({
                        type:"POST",
                        url: urlPath,
                        data:JSON.stringify(person),
                        contentType:"application/json"
                    }
                    ).done(function(msg){
                    	addLineOfPerson(msg);
                    });
                };
                return [getAddPersonInfo, getUpdatePersonInfo, clearPersonInfo, request];
            };
            
            function init(){
                function initPersonList(){
                    $.ajax({
                        type:"GET",
                        url:"findAllPerson",
                        contentType:"application/json"
                    }
                    ).done(function(msg){
                        for(var s in msg)
                        {
                        	addLineOfPerson(msg[s]);     
                        }
                    });   
                };
                return initPersonList;
            };
            var updateInofo = updateInofoFunc();
            var addLineOfPerson = addPersonByLine();
            var addOperator = addPerson();
            var initOperator = init();
            initOperator();
            $("#add").click(function(){
                addOperator[0]();
                addOperator[3]("addPerson");
                addOperator[2]();
            });
            $("#update-btn").click(function(){
                addOperator[1]();
                addOperator[3]("updatePerson");
                addOperator[2]();
                updateInofo[3]().parent().parent().remove();
            });
        })
	</script>
</body>
</html>